<template>
  <div class="box">
      <div class="app">
            <div class="top">
                <h2>H E Y T E A</h2>
            </div>
      </div>
      <div class="meet"> 
            <div class="window">
                <div class="go">
                    <div class="member">
                        <h3>GO会员</h3>
                        <button  @click="fun('/')">点击登录</button>    
                    </div>
                    <img src="@/assets/kang/3.png" alt=""> 
                </div>
                <div class="line">
                    <dl>
                        <dd><img src="@/assets/kang/4.png" alt=""></dd>
                        <dt>积分商城</dt>
                    </dl>
                    <dl>
                        <dd><img src="@/assets/kang/4.png" alt=""></dd>
                        <dt>喜茶券</dt>
                    </dl>
                    <dl>
                        <dd><img src="@/assets/kang/4.png" alt=""></dd>
                        <dt>阿喜有礼</dt>
                    </dl>
                </div>
            </div>
            <div class="mission">
                <button @click="fun('/')">
                    <ul>
                        <h3>任务中心</h3>
                        <h6>MISSION CENTER</h6>
                    </ul>
                    <img src="@/assets/kang/7.png" alt="">
                </button>
                
            </div>
      </div>
            
  </div>
</template>

<script>
export default {
    methods:{
        fun(url){
            this.$router.push(url)
        },
        funb(url){
            this.$router.replace(url)
        }
    }
}
</script>

<style scoped>
    .box{
        width: 100%;
        height: 100%;
    }
    .app{
        height:3.25rem;
        background-color: azure;
        background-image: url('../../assets/kang/2.png');
        
    }
    .top{
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
    }
    .meet{
        height: 3.2rem;
        background-color: #f6f6f6;
        position: relative;
    }
    .window{
        width: 90%;
        height: 2.35rem;
        background-color: white;
        margin: auto;
        position: absolute;
        top: -0.6rem;
        left: 0.18rem;
        border-radius: 0.1rem;
    }
    .go{
        width: 95%;
        height: 1.15rem;
        /* background-color: wheat; */
        margin: auto;
        border-bottom: 0.01rem solid gainsboro;
        position: relative;
    }
    .member{
        width: 0.8rem;
        height: 0.6rem;
        /* background-color: thistle; */
        position: absolute;
        bottom: 0.05rem;
        text-align: center;
    }
    .member>h3{
        margin-bottom: 0.05rem;
       
    }
    .member>button{
        width: 0.7rem;
        height: 0.25rem;
        background-color: black;
        color: white;
        border-radius: 0.2rem;
        font-size: 0.1rem;
        
    }
    .go>img{
        float: right;
        margin-right: 0.2rem;
        margin-top: 0.1rem;
    }
    .line{
        width: 95%;
        height: 1.13rem;
        /* background-color: wheat; */
        margin: auto;
        display: flex;
        justify-content: space-around;
    }
    .line>dl{
        width: 0.65rem;
        height: 0.9rem;
        /* background-color: turquoise; */
        margin-top: 0.13rem;
        font-size: 0.12rem;
        text-align: center;
    }
    .line>dl>dd>img{
        width: 0.45rem;
        height: 0.5rem;
        margin-top: 0.1rem;
        margin-left: 0.1rem;
        margin-bottom: 0.09rem;
    }
    .mission{
        width: 90%;
        height: 1.22rem;
        background-color: white;
        position: absolute;
        bottom: 0.12rem;
        left: 0.18rem;
        border-radius: 0.1rem;
    }
    .mission>button{
        width: 2.8rem;
        height: 0.9rem;
        background: none;
        border: none;
       margin-left: 0.3rem;
        margin-top: 0.15rem;
    }
    .mission>button>ul{
        float: left;
        margin-left: 0.2rem;
        margin-top: 0.1rem;
    }
    .mission>button>ul>h3{
        font-size: 0.15rem;

    }
    .mission>button>ul>h6{
        font-size: 0.08rem;
    }
    .mission>button>img{
        float: right;
        margin-right: 0.2rem;
    }
</style>
